<template>
  <div>
    <canvas ref="canvas" width="800" height="400" calss="rail-canvas"></canvas>
  </div>
</template>

<script>
    export default {
        name: 'RailwayCanvas',
        mounted() {
            this.drawRailway();
        },
        methods: {
            drawRailway() {
                const canvas = this.$refs.canvas;
                const ctx = canvas.getContext('2d');

                // 设置铁轨颜色
                ctx.strokeStyle = '#333';
                ctx.lineWidth = 10;

                // 绘制两条平行线作为铁轨
                for (let i = 50; i < 800; i += 100) {
                    ctx.beginPath();
                    ctx.moveTo(i, 100);
                    ctx.lineTo(i, 300);
                    ctx.stroke();

                    // 绘制轨枕
                    for (let j = 100; j < 300; j += 20) {
                        ctx.fillStyle = '#663300';
                        ctx.fillRect(i - 5, j - 5, 10, 10); // 简化表示轨枕
                    }
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
  .rail-canvas{
    padding: 10px;
    border-radius: 8px;
    border: black 1px solid;
  }
</style>
